require(['config'],()=>{
    require(['jquery','swiper','artTemplate','includes','tool','cookie'],($,Swiper,template)=>{
        class detailPage{
            constructor(){
                this.detail={}
                this.loadProduct()
                this.loadRecommend()
                this.addCart()
                this.numberControl()
                $.cookie.json=true
            }
            loadProduct(){
                const {id}=$.qsToObj(location.search.slice(1))
                $.ajax({
                    url:('../json/recommends.json'),
                    method:'GET',
                    dataType:'json',
                    success:resData=>{
                        const {data}=resData
                        const res=data.find(item=>item.id===Number(id))
                        this.detail=res
                        const html=template('pro-template',{product:res})
                        $('main').prepend(html)
                        new Swiper('.swiper-container',{
                            loop:true,
                            pagination:{
                                el:'.swiper-pagination',
                                clickable:true,
                                bulletElement:'span'
                            },
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            }
                        })
                    }
                })
                
            }
            loadRecommend(){
                $.ajax({
                    url:('../json/recommends.json'),
                    method:'GET',
                    dataType:'json',
                    success:resData=>{
                        const {data}=resData
                        const html=template('recommend-template',{recommends:data})
                        $('.detail-bottom').html(html)
                    }
                })
            }
            addCart(){
                $('main').on('click','.buy-action .btn-cart',e=>{
                    e.preventDefault()
                    console.log(this.detail);
                    const currProduct={
                        id:this.detail.id,
                        name:this.detail.gods_name,
                        version:this.detail.version,
                        color:this.detail.color,
                        price:this.detail.price,
                        img:this.detail.imgUrl,
                        amount:Number($('.product-number .num-control input').val()),
                        checked:true
                    }
                    const cart=$.cookie('cart')||[]
                    const has=cart.some(item=>item.id===currProduct.id)
                    if(has){
                        for(let i=0;i<cart.length;i++){
                            if(cart[i].id===currProduct.id){
                                if(cart[i].amount+currProduct.amount<3){
                                    cart[i].amount+=currProduct.amount
                                    break
                                }else{
                                    cart[i].amount=3
                                } 
                            }
                        }
                    }else{
                        cart.push(currProduct)
                    }
                    $.cookie('cart',cart,{expires:10, path: '/'})
                })
            }
            numberControl(){
                $('main').on('click','.num-control .btn-add',e=>{
                    e.preventDefault()
                    const max=Number($('.num-control input').attr('data-limit'))
                    if($('.num-control input').val()<max){
                        $('.num-control input').val(Number($('.num-control input').val())+1)
                    }
                })
                $('main').on('click','.num-control .btn-sub',e=>{
                    e.preventDefault()
                    if($('.num-control input').val()>1){
                        $('.num-control input').val(Number($('.num-control input').val())-1)
                    }
                })
                $('main').on('input','.num-control input',e=>{
                    const max=Number($('.num-control input').attr('data-limit'))
                    if($('.num-control input').val()>max){
                        $('.num-control input').val(max)
                   }else if($('.num-control input').val()<1){
                        $('.num-control input').val(1)
                   }
                })
            }
        }
        new detailPage()
    })
})
// let flag = 1
// /* **********顶部下拉列表************* */
// document.querySelector('header .header-main nav ul').addEventListener('mouseover', e => {
//     if (e.target.parentNode.className === 'drop') {
//         $('header .drop-down').classList.add('drop-down-show')
//         $('header').classList.add('toggle')
//         $('.header-cover').classList.add('header-cover-show')
//         document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//             items.classList.remove('font-white')
//         })
//         $('header .header-main .user .user-img').id = 'user-img-gray'
//         $('header .header-main .cart').id = 'cart-gray'
//         /* $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-gray.png)'
//         $('header .header-main .cart').style.backgroundImage='url(./img/cart-gray.png)' */
//     } else if (e.target.parentNode.className === 'no-drop') {
//         $('header .drop-down').classList.remove('drop-down-show')
//         $('header .drop-down').classList.remove('drop-down-appDownLoad-show')
//         $('.header-cover').classList.remove('header-cover-show')
//         $('header').classList.remove('toggle')
//         $('header .drop-down .app-download').classList.remove('app-download-show')
//         document.querySelectorAll('.banner .banner-container li').forEach(items => {
//             if (items.classList.contains('active') && items.dataset.theme === 'white') {
//                 document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//                     items.classList.add('font-white')
//                 })
//                 $('header .header-main .user .user-img').id = 'user-img-white'
//                 $('header .header-main .cart').id = 'cart-white'
//                 /* $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-white.png)'
//                 $('header .header-main .cart').style.backgroundImage='url(./img/cart-white.png)' */
//             }
//         })
//     } else if (e.target.parentNode.className === 'appDownLoad-drop') {
//         $('header .drop-down').classList.add('drop-down-appDownLoad-show')
//         $('header').classList.add('toggle')
//         $('.header-cover').classList.add('header-cover-show')
//         document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//             items.classList.remove('font-white')
//         })
//         $('header .header-main .user .user-img').id = 'user-img-gray'
//         $('header .header-main .cart').id = 'cart-gray'
//         $('header .drop-down .app-download').classList.add('app-download-show')
//         for (let j = 0; j < drops.length; j++) {
//             dropDowns[j].classList.remove('drop-down-main-show')
//         }
//         flag = 0
//         /* $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-gray.png)'
//         $('header .header-main .cart').style.backgroundImage='url(./img/cart-gray.png)' */
//     }
// }, false)

// const drops = document.querySelectorAll('header .header-main nav ul .drop')
// const dropDowns = document.querySelectorAll('header .drop-down .drop-down-main')
// for (let i = 0; i < drops.length; i++) {
//     drops[i].onmouseover = function () {
//         for (let j = 0; j < drops.length; j++) {
//             dropDowns[j].classList.remove('drop-down-main-show')
//         }
//         flag = 1
//         dropDowns[i].classList.add('drop-down-main-show')
//     }
// }
// document.querySelector('header .drop-down').addEventListener('mouseover', e => {
//     if (flag == 0) {
//         $('header .drop-down .app-download').classList.add('app-download-show')
//         $('header .drop-down').classList.add('drop-down-appDownLoad-show')
//     } else {
//         $('header .drop-down').classList.add('drop-down-show')
//         //$('header .drop-down .drop-down-main').classList.add('drop-down-main-show')
//     }
//     document.querySelectorAll('header .drop-down .drop-down-main ul').forEach(items=>{
//         items.className='ul-on'
//     })
//     $('header').classList.add('toggle')
//     $('.header-cover').classList.add('header-cover-show')
//     document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//         items.classList.remove('font-white')
//     })
//     $('header .header-main .user .user-img').id = 'user-img-gray'
//     $('header .header-main .cart').id = 'cart-gray'
// }, false)

// document.querySelector('header .drop-down').addEventListener('mouseout', e => {
//     $('header .drop-down').classList.remove('drop-down-show')
//     $('header .drop-down').classList.remove('drop-down-appDownLoad-show')
//     $('.header-cover').classList.remove('header-cover-show')
//     $('header').classList.remove('toggle')
//     $('header .drop-down .app-download').classList.remove('app-download-show')
//     document.querySelectorAll('header .drop-down .drop-down-main ul').forEach(items=>{
//         items.className=''
//     })
//     document.querySelectorAll('.banner .banner-container li').forEach(items => {
//         if (items.classList.contains('active') && items.dataset.theme === 'white') {
//             document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//                 items.classList.add('font-white')
//             })
//             $('header .header-main .user .user-img').id = 'user-img-white'
//             $('header .header-main .cart').id = 'cart-white'
//             // $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-white.png)'
//             // $('header .header-main .cart').style.backgroundImage='url(./img/cart-white.png)'
//         }
//     })
// }, false)

// $('header .header-main .user').addEventListener('mouseover',()=>{
//     $('header .header-main .user .user-drop-down').style.display='block'
// },false)
// $('header .header-main .user').addEventListener('mouseleave',()=>{
//     $('header .header-main .user .user-drop-down').style.display='none'
// },false)
